<template>
    <div class="menu">
        <tableLoyout
                :columns="columns"
                :getlist="getlist"
                :formItems="formItems"
                :add="addMenu"
                :del="delMenu"
                :edit="editMenu"
                >
            <template v-slot:pmenu="{formData,key}">
                <el-select v-model="formData[key]">
                    <el-option
                            v-for="item in plist"
                            :key="item.id"
                            :label="item.menuName"
                            :value="item.id"
                            />
                </el-select>
            </template>
        </tableLoyout>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref,onMounted} from 'vue';
    import tableLoyout from "@/components/tableLayout/tableLayout.vue";
    import {getlist,addMenu,getAllcatalogue,delMenu,editMenu} from "@/api/menu"
    export default defineComponent({
        name: 'menu',
        components:{tableLoyout},
        setup() {
            const columns = [
                {
                    label:'序号',
                    prop:'date',
                    type:'index',
                    width:'120px',
                    align:'center'
                },
                {
                    label:'菜单名称',
                    prop:'menuName',
                    align:'center'
                },
                {
                    label:'路由名',
                    prop:'name',
                    align:'center'
                },
                {
                    label:'图标',
                    prop:'icon',
                    align:'center'
                },
                {
                    label:'路径',
                    prop:'path',
                    align:'center'
                },
                {
                    label:'组件模板',
                    prop:'component',
                    align:'center'
                },
                {
                    label:'重定向',
                    prop:'redirect',
                    align:'center'
                },
                {
                    label:'备注',
                    prop:'remarks',
                    align:'center'
                }
            ]
            const formItems= [
                {
                    label:"菜单名称",
                    element:'input',
                    key:'menuName',
                    span:12,
                    formattributes:{
                        rules:{
                            required: true,
                            message: '请填写菜单名称！',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:"上级目录",
                    element:'select',
                    slot:'pmenu',
                    key:'pid',
                    span:12
                },
                {
                    label:"路由地址",
                    element:'input',
                    key:'path',
                    span:12,
                    formattributes:{
                        rules:{
                            required: true,
                            message: '请填写路由地址！',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:"路由键值",
                    element:'input',
                    key:'name',
                    span:12,
                    formattributes:{
                        rules:{
                            required: true,
                            message: '请填写路由键值！',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:"组件模板",
                    element:'input',
                    key:'component',
                    span:12,
                    formattributes:{
                        rules:{
                            required: true,
                            message: '请填写组件路径！',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:"图标",
                    element:'input',
                    key:'icon',
                    span:12,
                    formattributes:{
                    }
                },
                {
                    label:"菜单类型",
                    element:'select',
                    key:'type',
                    span:12,
                    attributes:{
                        options:[
                            {
                                label:'目录',
                                value:0
                            },
                            {
                                label:'菜单',
                                value:1
                            }
                        ]
                    },
                    formattributes:{
                        rules:{
                            required: true,
                            message: '请选择菜单类型！',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:"重定向",
                    element:'input',
                    key:'redirect',
                    span:12,
                    formattributes:{
                    }
                },
                {
                    label:"备注",
                    element:'input',
                    key:'remarks',
                    span:12,
                    attributes: {
                        type:'textarea'
                    },
                    formattributes:{
                    }
                }
            ]

            const plist = ref([])

            onMounted(()=>{
                getAllcatalogue(null).then(res=>{
                    plist.value = res.data
                })
            })

            return {columns,formItems,plist,getlist,delMenu,addMenu,editMenu};
        },
    });
</script>
